<template>
  <div class="new-guide">
    <div class="guide-left">
      <div class="guide-title">Resumbit</div>
      <div class="guide-left-order">
        <div class="order-title">Your order</div>
        <div class="order-content">
          <div class="order-img">
            <div class="content-img">
              <img :src="imgUrl">
            </div>
          </div>
          <div class="content-text">
            <div class="content-text-box">{{ headLine }}</div>
            <div class="Present-select" v-for="(index,item) in productAttributes" :key="index" v-show="productAttribute">
              {{item.name}}:  <span class="select-item">{{item.value}}</span>
            </div>
            <div class="content-num">Qty: <span class="select-item">1</span></div>
          </div>
          <div class="content-Price">
            <div class="Present-price">${{ item.price }}</div>
            <div class="Original-box">
              <s class="Original-price">(${{ item.originalPrice }})</s>
              <span class="Discount">Rebate  <i>${{amount}}</i></span>
            </div>
          </div>
        </div>
      </div>
      <div class="guide-left-operation">
        <div class="operation-title">Operation Guide</div>
        <ul class="guide-img">
          <li class="img-item1"><img src="../../../static/img/guide1.png"></li>
          <li class="img-item2"><img src="../../../static/img/guide2.png"></li>
          <li class="img-item3"><img src="../../../static/img/guide3.png"></li>
          <li class="img-item4"><img src="../../../static/img/guide4.png"></li>
          <li class="img-item5"><img src="../../../static/img/guide5.png"></li>
          <li class="img-item6"><img src="../../../static/img/guide6.png"></li>
        </ul>
        <ul class="guide-text">
          <li class="text-item1">Go to Amazon.</li>
          <li class="Arrow-item1">
            <i class="Arrow"></i>
            <span class="Arrow-star">Star</span>
          </li>

          <li class="text-item2">Purchase the product  at the original price.</li>

          <li class="Arrow-item1">
            <i class="Arrow"></i>
          </li>

          <li class="text-item3">Return our site.</li>

          <li class="Arrow-item1">
            <i class="Arrow"></i>
          </li>
          <li class="text-item4">Submit your Amazon order ID.</li>

          <li class="Arrow-item1">
            <i class="Arrow"></i>
          </li>
          <li class="text-item5">Submit your Paypal account.</li>
          <li class="Arrow-item1">
            <i class="Arrow"></i>
            <span class="Arrow-Over">Over</span>
          </li>
          <li class="text-item6">Submit your information.</li>
        </ul>
      </div>
    </div>
    <div class="guide-right">
      <div class="forms">
        <div class="forms-title">Forms</div>
        <div class="forms-time">
          <CountDown @time-end="timeEnd" :endTime="this.endTime" :upTime="true"></CountDown>
        </div>
      </div>
      <div class="goAmazon-box">
        <i class="one"></i>
        <span class="goAmazon-title">Maybe you need to buy it again.</span>
      </div>
      <button class="Open-Amazon" @click="amazon">OPEN IN AMAZON</button>
      <div class="submit-box">
        <div class="sub-title">
          <i class="two"></i>
          <span style="width: 91%;display: inline-block">Please resubmit your Amazon order number.</span>
        </div>
        <input class="step-right-input order" placeholder="#order number" ref="order" v-model="order">
        <p class="order-error c-txt-err" ref="orderError" v-show="orderError"></p>
        <input class="step-right-input paypal" placeholder="#Paypal account" ref="paypal" v-model="paypal">
        <p class="paypal-error c-txt-err" ref="paypalError" v-show="paypalError"></p>
      </div>
      <button class="submit" @click="subRequest" ref="submit">Submit</button>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import {mapGetters,mapActions} from 'vuex'
  import {myRequest} from 'api/my-request'
  import {getRequestDetail} from "api/requests";
  import CountDown from 'base/countdown/countdown'
  export default {
    data() {
      return {
        order:'',
        paypal:'',
        orderError:false,
        paypalError:false,
        item: {},
        variation:{},
        imgUrl: '',
        amount: '',
        headLine:'',
        orderNo:'',
        endTime:'',
        amazonUrl:'',
        Size:'',
        Style:'',
        Color:'',
        productAttribute:false,
        productAttributes:[]
      }
    },
    created () {
      // this.$nextTick(() => {
        this._getRequestDetail()
      // })
    },
    components:{
      CountDown
    },
    computed:{
      ...mapGetters([
        'MyRequest'
      ])
    },
    methods: {
      timeEnd() {
        console.log(1)
      },
      amazon() {
        window.open(this.amazonUrl, '_target')
      },

      _getRequestDetail() {
        //保持页面不刷新
        const path = this.$router.currentRoute.fullPath.split('/')
        let orderNo = ''
        if (!this.MyRequest.orderNo) {
          if (path[3]) {
            orderNo = path[3]
          }
        } else {
          orderNo = this.MyRequest.orderNo
        }
        if (!orderNo) {
          this.$router.push(`/${path[1]}`)
          return
        }
        getRequestDetail(orderNo).then(res => {
          this.data = res
          this.item = res.orderItems[0].productInOrder
          this.headLine = this._strFormat(this.item.headLine, 70)
          this.imgUrl = imgUrl + this.item.images[0].src + '?x-oss-process=image/resize,h_250,limit_0'
          this.amount = this.data.totalRebate.amount
          this.endTime = this.data.requestTime
          this.amazonUrl = this.item.url
          this.paypal = this.data.paypalAccount
          this.orderNo = this.data.orderNo
          if(!this.item.variation){
            this.productAttribute = false
          }else {
            this.productAttribute = true
            this.productAttributes = this.item.variation.productAttributes
          }
        })
      },
      subRequest() {
        this.StartLoading(this._subRequest)
      },
      _subRequest() {
        return new Promise(resolve => {
        if(this.paypal === ''){
          this.paypalError = true
          this.$refs.submit.disabled = "disabled"
          this.$refs.paypalError.innerHTML= 'Please enter your full paypal.'
          return false
        }
        if(this.order === ''){
          this.orderError = true
          this.$refs.orderError.innerHTML= 'Please enter your full order.'
          this.$refs.submit.disabled = "disabled"
          return false
        }
        myRequest(this.order,this.paypal,this.orderNo).then(() => {
          resolve()
          this.$router.push({
            path: `/thank`
          })
        })
       })
      },
      _strFormat(str, len) {
        if (str.length && str.length > len) {
          return str.substring(0, len) + '...'
        }
        return str
      },
      ...mapActions([
        'StartLoading'
      ])
    },
    watch: {
      order: function (order) {
        if (order !== '') {
          this.orderError = false
          this.$refs.submit.disabled = ""
        }
      },
      paypal: function (paypal) {
        if (paypal !== '') {
          this.paypalError = false
          this.$refs.submit.disabled = ""
          return
        }
      },
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/index"
  .c-txt-err
    color: #ff2552 !important
    padding-left 10px
    font-size 14px
  .order-error
    position absolute
    top: 7.9rem;
    left: 3rem;
  .paypal-error
    position absolute
    top: 12.5rem
    left: 3rem;
  .new-guide
    display flex
    .guide-left
      width 700px
    .guide-title
      font-size:25px
      margin 50px 0 45px 0
    .guide-left-order
      border:1px solid #ccc
      text-align center
      height 192px
      .order-title
        height 44px
        text-align left
        padding-left 18px
        line-height  44px
        background #f6f7f9
        font-size 19px
        color black
        border-bottom: 1px solid #ccc;
      .order-content
        display flex
        height 77%
        .order-img
          width 171px
        .content-img
          margin 20px 15px
          height 73%
          text-align: center;
        .content-img img
          height  100%
        .content-text
          width 18.8rem
          word-break: break-all;
          word-wrap: break-word;
          text-align: left;
          line-height: 1.3;
          .content-text-box
            margin-top 20px
            margin-bottom 15px
          .Present-select
            color: #333;
            font-size: 14px;
            .select-item
              color: #75787b;
              font-size: 13px;
          .content-num
            color: #333;
            font-size 14px
            .select-item
              color: #75787b;
              font-size: 13px;
        .content-Price
          width 15rem
          .Present-price
            color: #000
            margin-top 20px
            margin-bottom 15px
            font-size 20px
            padding-right 24px
            text-align right
          .Original-box
            padding-right 24px
            text-align: right;
            .Original-price
              padding-right 12px
              font-size 14px
              color: #ccc
            .Discount
              color: #fa323c
              font-size 14px
            .Discount i
              font-style normal
    .guide-left-operation
      margin-top 37px
      border:1px solid #ccc
      text-align center
      height 1700px
      margin-bottom 75px
      .operation-title
        height 44px
        text-align left
        padding-left 18px
        line-height  44px
        background #f6f7f9
        font-size 19px
        color black
        border-bottom: 1px solid #ccc;
      .guide-img
        display flex
        flex-wrap wrap
        margin 27px 22px 0 22px
      .guide-img .img-item2
        margin 0 46px
      .guide-img .img-item5
        margin-left 46px
        margin-right 46px
      .guide-img .img-item4, .img-item5, .img-item6
        margin-top 32px
      .guide-text
        margin-top 110px
        margin-left 22px
        text-align left
        font-size 22px
        .Arrow-item1
          position relative
          margin 12px 2.5rem 12px 2.5rem
          .Arrow
            background url("../../../static/img/down-arrow.png") no-repeat
            display inline-block
            width 3rem
            height 3rem
          .Arrow-star
            position absolute
            left 25px
            top 12px
            color: #474747
            font-size 16px
            transform:rotate(90deg);
          .Arrow-Over
            position absolute
            left 25px
            top 12px
            color: #474747
            font-size 16px
            transform:rotate(90deg);
    .guide-right
      margin-top 119px
      width 335px
      border:1px solid #ccc
      margin-left 34px
      height 518px
      .forms
        height 44px
        text-align left
        padding-left 18px
        line-height  44px
        background #f6f7f9
        font-size 19px
        color black
        border-bottom: 1px solid #ccc;
        position relative
        .forms-title
          display inline-block
        .forms-time
          display inline-block
          text-align right
          position absolute
          right 22px
          font-size 14px
      .goAmazon-box
        margin 25px 0 35px 10px
        font-size 16px
        color: #98989a
        .one
          background url("../../../static/img/one.svg") no-repeat
          display inline-block
          width 1.5rem
          height 1rem
          vertical-align middle
        .goAmazon-title
          position: relative;
          top: 2px;
      .Open-Amazon
        position: relative;
        background-color: #f4d078;
        background-color: -webkit-gradient(linear, left top, left bottom, from(#f7dfa5), to(#f0c14b));
        background-color: linear-gradient(to bottom, #f7dfa5, #f0c14b);
        color: #fff !important;
        box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
        border-width: 1px;
        border-style: solid;
        border-color: #a88734 #9c7e31 #846a29;
        width: 16rem;
        height: 2.5rem
        padding-left 14.5%
        background-image: url(../../../static/img/amazon-icon.png)
        vertical-align: middle;
        background-repeat no-repeat
        background-size: 1.2rem;
        background-position: 1.4rem center;
        outline none
        font-size: 14px;
        display: block;
        margin auto
      .submit-box
        border-top 1px solid #ccc
        border-bottom  1px solid #ccc
        margin 40px 0 20px 0
        position relative
        .sub-title
          font-size 16px
          color: #98989a
          margin 25px 0 34px 10px
          .two
            background url("../../../static/img/two.svg") no-repeat
            display inline-block
            width 1.5rem
            height 1rem
            vertical-align top
        .step-right-input
          width: 16rem;
          height: 2.5rem
          color: #000
          outline none
          border: 2px solid #ccc
          font-size 18px
          background-color #fff
          display: block ;
          text-indent: 1rem
          margin 0 auto 1.5rem auto
        .paypal
          margin-bottom 2rem
      .submit
        width: 16rem;
        height: 2.5rem
        background-color #15813b
        color #fff
        font-weight bold
        font-size: 16px
        line-height: 1.8rem;
        display block
        margin auto
        outline none
        border 0
        border-radius 5px


  input::-webkit-input-placeholder
    color:#ccc;
  input::-moz-placeholder  /* Mozilla Firefox 19+ */
    color:#ccc;
  input:-moz-placeholder   /* Mozilla Firefox 4 to 18 */
    color:#ccc;
  input:-ms-input-placeholder  /* Internet Explorer 10-11 */
    color:#ccc;
  .invalid:-moz-placeholder/* Mozilla Firefox 4 to 18 */
    color: black;
    opacity: 1;
  .invalid::-moz-placeholder /* Mozilla Firefox 19+ */
    color: black;
    opacity: 1;
  input.invalid:-ms-input-placeholder
    color: black;
  input.invalid::-webkit-input-placeholder
    color: black;
</style>



